<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>异步加载dom，scroll无法滑动到底,需要在dom加载完成之后刷新iscroll</title>
</head>

<body>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #wrapper {
        width: 100%;
        position: absolute;
        top: 44px;
        bottom: 10px;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        overflow: hidden;
    }

    #scroller {
        position: absolute;
        z-index: 1;
        padding: 0 10px;
        width: auto;
    }

    li {
        list-style: none;
        line-height: 50px;
        border-bottom: 1px solid #999;
    }

    li .name {
        color: red;
    }

    .header {
        width: 100%;
        height: 44px;
        background-color: red;
        position: absolute;
        top: 0;
        color: #fff;
        line-height: 44px;
        font-size: 18px;
        padding-left: 10px;
    }
    </style>
    <div class="header" onclick="window.history.back()">返回</div>
    <div id="wrapper">
        <div id="scroller">
            <ul></ul>
        </div>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="iscroll-probe-5.1.1.js"></script>
    <script type="text/javascript">
    /**
     *	异步加载dom,数据加载完成之后刷新iscroll
     */
    var myscroll;
    $(function() {
        initIscroll();
        loadData();
    });

    function initIscroll() {
        if (!myscroll) {
            myscroll = new IScroll($('#wrapper')[0], {
                mouseWheel: true
            });
        }
    }

    function refreshIScroll() {
        if (myscroll) {
            myscroll.refresh();
        } else {
            initIscroll();
        }
    }

    function loadData() {
        $.ajax({
            url: 'data.json',
            type: 'get',
            dataType: "json",
            success: function(response) {
                if (response && response.result == 0) {
                    uiView(response.data);
                }
            }
        });
    }

    function uiView(data) {
        if (!data || (data && !data.length)) return;
        var html = "";
        $.each(data, function(index, elem) {
            html += "<li><span class='name'>" + elem.name + "</span>:" + elem.desc + "</li>";
        });

        $('#scroller ul').empty().append(html);
        refreshIScroll();
    }
    </script>
</body>

</html>
